<template>
  <div class="home">
    <menu> </menu>
    <!-- 侧边栏 -->
    <aside class="left">
      <ul>
        <div v-for="(item, index) in asideList" :key="item.path">
          <li
            :path="item.path"
            tag="li"
            @click="handleClickLi(item.path, index)"
          >
            <span :class="{ active: asideActive == index }">{{
              item.title
            }}</span>
          </li>
        </div>
      </ul>
    </aside>

    <section class="right">
      <router-view></router-view>
    </section>
  </div>
</template>

<script>
import { getAsideList } from '@/network/home'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      asideActive: 0,
      asideList: []
    }
  },
  created() {
    this.getAsideList()
  },
  methods: {
    async getAsideList() {
      const { data: res } = await getAsideList()
      this.asideList = res.list
    },
    handleClickLi(path, index) {
      this.asideActive = index
      this.$router.push(path).catch(e => console.log('当前路由就是home'))
    }
  }
}
</script>

<style scoped>
.home {
  min-width: 1162px;
}
menu {
  height: 70px;
  width: 100%;
  clear: both;
  background: #f90;
  border: 2px solid #7c7b7c25;
}
aside {
  width: 300px;
  height: calc(100vh - 70px);
  overflow: hidden;
  background: var(--color-bgc);
  border-top: 3px solid rgba(179, 179, 179, 0.459);
  border-right: 3px solid rgba(179, 179, 179, 0.459);
  border-radius: 0 20px 20px 20px;
}
section {
  height: calc(100vh - 70px);
}
.left {
  float: left;
}
.right {
  margin-left: 300px;
}
.left ul {
  margin: 10px;
  text-align: center;
}
.left ul li {
  padding: 5px;
  background-color: #fff;
}
.left ul li span:hover {
  color: var(--color-high-text);
}
.left ul li span {
  display: inline-block;
  width: 200px;
  padding: 10px 20px;
  font-size: 18px;
  border: 1px solid #790766;
  border-radius: 22px;
  box-shadow: 0 2px 5px rgba(135, 153, 163, 0.671);
  cursor: pointer;
}
.active {
  color: var(--color-high-text);
  background-color: #352a37;
}
</style>
